<template>
  <div>
    <Row>
      <Col :span="24" class="form-box">
        <Form ref="form" :model="form" :label-width="80" :rules="rule" inline>
          <FormItem label="卡券金额">
            <Input v-model="form.money" placeholder="请输入查询的卡券金额"></Input>
          </FormItem>
          <FormItem label="卡券状态">
            <Select v-model="form.state" style="width: 200px">
              <Option value="">全部</Option>
              <Option value="0">未使用</Option>
              <Option value="1">已使用</Option>
              <Option value="2">已过期</Option>
            </Select>
          </FormItem>
          <FormItem label="起止时间">
            <DatePicker @on-change="times" type="daterange" :start-date="new Date()" placement="bottom-end"
                        placeholder="请选择一个时间范围" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="search()">搜索</Button>
            <Button style="margin-left: 30px;" type="success" @click="openAdd">新增卡券</Button>
          </FormItem>
        </Form>
      </Col>
      <Col :span="24">
        <div class="table-container">
          <Table border :max-height="800" stripe :columns="col" :data="tableData" no-data-text="未查询到数据"
                 context-menu show-context-menu @on-contextmenu="handleContextMenu">
            <template slot="contextMenu">
              <DropdownItem @click.native="handleContextMenuEdit">编辑</DropdownItem>
            </template>
          </Table>
        </div>
        <div class="page-container" v-if="total > 10">
          <Page :total="total" @on-change="PageChange"></Page>
        </div>
      </Col>
    </Row>

    <Modal v-model="isShowEdit" title="编辑卡券" :loading="isEditLoading" @on-ok="confirmUpdate">
      <label>满减额度</label> <Input v-model="update.couponExplain" placeholder="满减额度"/>
      <br/>
      <br/>
      <label>满减金额</label> <Input v-model="update.couponMoeny" placeholder="满减金额"/>
      <br/>
      <br/>
      <label>满减描述:满{{ update.couponExplain }}减{{ update.couponMoeny }}</label>
    </Modal>

    <Modal v-model="isShowAdd" title="新增卡券" :loading="isAddLoading" @on-ok="confirmAdd">
      <label>满减额度</label> <Input v-model="add.couponExplain" placeholder="满减额度"/>
      <br/>
      <br/>
      <label>满减金额</label> <Input v-model="add.couponMoeny" placeholder="满减金额"/>
      <br/>
      <br/>
      <label>满减描述:满{{ add.couponExplain }}减{{ add.couponMoeny }}</label>
      <br/>
      <br/>
      <label>卡券生效日期: </label>
      <DatePicker type="daterange" placement="bottom-end" placeholder="选择时间范围" style="width: 200px"
                  @on-change="addRange"></DatePicker>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "ticket",
  data() {
    return {
      form: {
        money: '',
        state: '',
        startTime: '',
        endTime: '',
      },
      pageNum: 0,
      pageSize: 10,
      total: 0,
      col: [
        {title: '卡券ID', key: 'couponId', tooltip: true, maxWidth: 100, align: 'center'},
        {title: '卡券金额', key: 'couponMoeny', tooltip: true, maxWidth: 150, align: 'center'},
        {title: '满减额度', key: 'couponExplain', tooltip: true, maxWidth: 150, align: 'center'},
        {title: '卡券描述', key: 'couponType', tooltip: true, align: 'center'},
        {title: '生效时间', key: 'couponFront', tooltip: true, maxWidth: 200, align: 'center'},
        {title: '过期时间', key: 'couponHours', tooltip: true, maxWidth: 200, align: 'center'},
        {title: '创建时间', key: 'couponCreatime', tooltip: true, maxWidth: 200, align: 'center'},
        {
          title: '卡券状态', key: 'couponStatus', tooltip: true, align: 'center', width: 100, render(h, obj) {
            let val = obj.row.couponStatus;
            let color, text;
            if (val == "0") {
              color = "success";
              text = "未使用";
            } else if (val == "1") {
              color = "primary";
              text = "已使用";
            } else if (val == "2") {
              color = "error";
              text = "已过期";
            }
            return h(('Tag'), {attrs: {color: color}}, text)
          }
        }
      ],
      tableData: [],
      rule: {},
      contextLine: 0,
      contextData: {},
      isShowEdit: false,
      isEditLoading: false,
      isShowAdd: false,
      isAddLoading: false,
      update: {
        couponExplain: 0,
        couponMoeny: 0,
        couponId: 0
      },
      add: {
        couponExplain: 0,
        couponMoeny: 0,
        couponType: '',
        couponFront: '',
        couponHours: ''
      }
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    times(val) {
      this.form.startTime = val[0] ? val[0] + " 00:00:00" : ""
      this.form.endTime = val[1] ? val[1] + " 23:59:59" : ""
    },
    handleContextMenuEdit() {
      this.isShowEdit = true
    },
    confirmUpdate() {
      this.isEditLoading = true
      let that = this;
      this.$http.postJson('/operator/updateTicket', this.update).then(() => {
        that.$Message.info('更新数据成功');
        that.isLoading = false
        that.isShow = false
        that.loadData()
      })
    },
    handleContextMenu(row) {
      this.contextData = row;
      this.update.couponExplain = row.couponExplain
      this.update.couponMoeny = row.couponMoeny
      this.update.couponId = row.couponId
    },
    PageChange(val) {
      this.pageNum = val;
      this.loadData();
    },
    search() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loadData()
        } else {
          this.$Message.error('Fail!');
        }
      })
    },
    loadData() {
      let params = {
        money: this.form.money,
        state: this.form.state,
        startTime: this.form.startTime,
        endTime: this.form.endTime,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      let that = this;
      this.$http.postJson('/operator/ticket', params).then(res => {
        that.total = res.total
        that.tableData = res.data
        that.pageNum = res.pageNum
        that.pageSize = res.pageSize
      })
    },
    openAdd() {
      this.isShowAdd = true
    },
    confirmAdd() {
      this.isAddLoading = true
      let that = this;
      this.$http.postJson('/operator/addTicket', this.add).then(() => {
        that.$Message.info('新增卡券成功');
        that.isAddLoading = false
        that.isShowAdd = false
        that.loadData()
      })
    },
    addRange(val) {
      this.add.couponFront = val[0] ? val[0] + " 00:00:00" : ""
      this.add.couponHours = val[1] ? val[1] + " 23:59:59" : ""
    }
  }
}
</script>

<style scoped>
.form-box {
  margin-top: 20px;
}

.table-container {
  margin: 0 auto;
  width: calc(100% - 40px);
}

.page-container {
  display: flex;
  width: calc(100% - 40px);
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
